<template>
	<view class="detail_wrap">
		<view class="flex-col justify-start relative group_3">
			<view class="flex-col section_5">
				<view class="flex-ali">
					<text class="font text_3">{{ detail.nickname }}</text>
					<view class="text-wrapper ml-8">{{ detail.gender == 0 ? '女' : '男' }}</view>
				</view>
				<view class="flex-row group_4" v-if="detail.company_position">
					<text class="font_3">{{ detail.company_position }}</text>
					<view class="section_6 view"></view>
					<text class="font_3 text_6">{{ detail.company_name }}</text>
					<view class="section_6 view_2"></view>
					<text class="font_3 text_7">{{ detail.company_industries }}</text>
				</view>
				<view class="flex-row group_5" v-if="detail.school_name">
					<text class="font_3">{{ detail.school_name }}</text>
					<view class="section_6 ml-8"></view>
					<text class="font_3 ml-8">{{ detail.school_education }}</text>
					<view class="section_6 ml-8"></view>
					<text class="font_3 ml-8">{{ detail.school_major }}</text>
				</view>
				<view class="flex-col group_6">
					<view class="flex-row">
						<text class="font_5">个人介绍：</text>
						<text class="font_4">{{ detail.intro }}</text>
					</view>
				</view>
				<view class="flex-col group_7">
					<view class="flex-row">
						<text class="font_5">优势资源：</text>
						<view class="font_4">{{ detail.merit }}</view>
					</view>
				</view>
				<view class="flex-row group_8">
					<view class="flex-col justify-start button" style="margin-right: 12rpx;"
						v-for="(item,index) in detail.tag"><text class="font_2 text_14">{{ item }}</text></view>
					<!-- <view class="flex-col justify-start button ml-6"><text class="font_2 text_15">独立自信</text>
					</view>
					<view class="flex-col justify-start button ml-6"><text class="font_2 text_16">不惧挑战</text>
					</view> -->
				</view>
			</view>
			<image class="image_8 pos" :src="ossUrl + detail.avatar" />
		</view>

		<view class="flex-col section_7" v-if="detail.task.length > 0">
			<view class="flex-row justify-between items-center self-stretch">
				<text class="font text_17">供需发布</text>
				<view class="flex-row group_9" @click="toList()">
					<text class="font_6">全部</text>
					<image class="image_9 ml-6" :src="remoteUrl + 'right_icon.png'" />
				</view>
			</view>
			<view class="" v-for="(item,index) in detail.task">
				<text class="self-start text_19">{{ item.createtime }}</text>
				<view class="flex-row justify-between items-center self-stretch group_10">
					<text class="font_7 row_1" style="width: 80%;">{{ item.title }}</text>
					<view class="flex-row group_11">
						<!-- <view class="flex-col justify-start items-center text-wrapper view" v-if="item.type_id == 1">
							<text class="font_6">供</text>
						</view>
						<view class="flex-col justify-start items-center text-wrapper need" v-if="item.type_id == 2">
							<text class="font_6">需</text>
						</view> -->
						<view class="flex-col justify-start items-center text-wrapper not" v-if="item.status == 0">
							<text class="font_6">未解决</text>
						</view>
						<view class="flex-col justify-start items-center text-wrapper already" v-if="item.status == 1">
							<text class="font_6">已解决</text>
						</view>
					</view>
				</view>
				<view class="text_23 row_1">
					<rich-text class="font_4" :nodes="item.content"></rich-text>
				</view>
			</view>
		</view>

		<view class="flex-col section_8" v-if="detail.company">
			<view class="flex-row justify-between items-center self-stretch">
				<text class="font" style="font-weight: bold;">公司介绍</text>
				<view class="flex-row group_12" @click="toCompany()">
					<text class="font_6">查看</text>
					<image class="image_9 ml-6" :src="remoteUrl + 'right_icon.png'" />
				</view>
			</view>
			<text class="self-start font_7 text_2 text_25">{{ detail.company.name }}</text>
			<view class="flex-col self-stretch group_13">
				<text class="self-stretch font_4">
					{{ detail.company.introduce }}
				</text>
			</view>
		</view>

		<view class="bot_btn">
			<view class="btn" @click="callPhone()">打电话</view>
		</view>
	</view>
</template>

<script>
	import {
		remoteUrl,
		ossUrl
	} from '@/utils/config.js'
	import {
		userInfo
	} from '@/api/connections.js'
	export default {
		data() {
			return {
				ossUrl: ossUrl,
				remoteUrl: remoteUrl,
				user_id: 1,
				detail: ''
			};
		},
		onLoad(options) {
			this.user_id = options.id
			this.userInfoFun()
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: '小程序分享',
				imageUrl: '',
			}
		},
		methods: {
			userInfoFun() {
				userInfo({
					id: this.user_id
				}).then(res => {
					res.data.tag = res.data.tag.split(',')
					if (res.code == 1) {
						this.detail = res.data
					}
				})
			},
			toList() {
				uni.navigateTo({
					url: '/pages/pages-list/people_demand/people_demand?id=' + this.user_id + '&name=' + this.detail.nickname
				})
			},
			toCompany() {
				uni.navigateTo({
					url: '/pages/pages-list/company_detail/company_detail?id=' + this.detail.company.id
				})
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.detail.mobile
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail_wrap {
		height: 100vh;
		background: #F6F8FF;
		padding-bottom: 120rpx;

		.group_3 {
			width: 690rpx;
			margin: 0 auto;
			padding: 80rpx 0 20rpx;

			.section_5 {
				padding: 36rpx 30rpx 32rpx;
				background-color: #ffffff;
				border-radius: 24rpx;

				.font {
					font-size: 34rpx;
					color: #000000;
				}

				.text_3 {
					margin-left: 162rpx;
				}

				.text-wrapper {
					padding: 3rpx 6rpx;
					background-color: #1c41f133;
					border-radius: 4rpx;
					font-size: 26rpx;
					color: #1c41f1;
					margin-top: 5rpx;
				}

				.group_4 {
					margin-top: 40rpx;

					.view {
						margin-left: 16rpx;
					}

					.text_6 {
						margin-left: 18rpx;
					}

					.view_2 {
						margin-left: 14rpx;
					}

					.text_7 {
						margin-left: 20rpx;
					}
				}

				.group_5 {
					margin-top: 26rpx;
				}

				.font_3 {
					max-width: 150rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 26rpx;
					color: #1c41f1;
				}

				.section_6 {
					background-color: #1c41f180;
					width: 2rpx;
					height: 24rpx;
				}

				.group_6 {
					margin-top: 24rpx;

					.text_12 {
						margin-right: 8rpx;
					}

					.text_13 {
						margin-left: 122rpx;
					}
				}

				.group_7 {
					margin-top: 22rpx;
				}

				.font_5 {
					font-size: 26rpx;
					color: #000000;
				}

				.font_4 {
					width: 83%;
					font-size: 26rpx;
					color: #000000;
				}

				.group_8 {
					margin-top: 26rpx;

					.button {
						padding: 6rpx 0;
						background-color: #1c41f133;
						border-radius: 4rpx;

						.text_14 {
							margin-left: 10rpx;
							margin-right: 8rpx;
						}

						.text_15 {
							margin-left: 10rpx;
							margin-right: 6rpx;
						}

						.text_16 {
							margin-left: 10rpx;
							margin-right: 8rpx;
						}
					}
				}

				.font_2 {
					font-size: 22rpx;
					color: #1c41f1;
				}
			}

			.image_8 {
				border-radius: 120rpx;
				width: 140rpx;
				height: 140rpx;
			}

			.pos {
				position: absolute;
				left: 30rpx;
				top: 20rpx;
			}
		}

		.section_7 {
			width: 690rpx;
			margin: 0rpx auto;
			padding: 30rpx 30rpx 34rpx;
			background-color: #ffffff;
			border-radius: 24rpx;

			.font {
				font-size: 34rpx;
				color: #000000;
			}

			.text_17 {
				font-weight: bold;
			}

			.group_9 {
				margin-right: 6rpx;

				.font_6 {
					font-size: 28rpx;
					line-height: 23.92rpx;
					color: #000000;
					opacity: 0.5;
				}

				.image_9 {
					opacity: 0.5;
					width: 12rpx;
					height: 24rpx;
				}
			}

			.text_19 {
				margin-left: 2rpx;
				margin-top: 44rpx;
				color: #000000;
				font-size: 24rpx;
			}

			.group_10 {
				margin-top: 26rpx;

				.font_7 {
					font-size: 32rpx;
					color: #000000;
				}

				.group_11 {
					margin-right: 8rpx;

					.text-wrapper {
						margin-right: 10rpx;

						.font_6 {
							font-size: 26rpx;
							color: #ffffff;
						}
					}

					.view {
						padding: 3rpx 7rpx;
						background-color: #70d042;
						border-radius: 4rpx;
					}

					.need {
						padding: 3rpx 7rpx;
						background-color: #f8d53a;
						border-radius: 4rpx;
					}

					.not {
						padding: 3rpx 7rpx;
						background-color: #999999;
						border-radius: 4rpx;
					}

					.already {
						padding: 3rpx 7rpx;
						border-radius: 4rpx;
						background: #1C41F1;
					}

					.font_8 {
						font-size: 26rpx;
						color: #ffffff;
					}
				}
			}

			.font_4 {
				font-size: 26rpx;
				color: #000000;
			}

			.text_23 {
				margin-top: 28rpx;
			}
		}

		.section_8 {
			width: 690rpx;
			margin: 20rpx auto;
			margin-top: 20rpx;
			padding: 30rpx 16rpx 182rpx 32rpx;
			background-color: #ffffff;
			border-radius: 24rpx;

			.font {
				font-size: 34rpx;
				color: #000000;
			}

			.group_12 {
				margin-right: 20rpx;

				.font_6 {
					line-height: 23.92rpx;
					font-size: 28rpx;
					color: #000000;
					opacity: 0.5;
				}

				.image_9 {
					opacity: 0.5;
					width: 12rpx;
					height: 24rpx;
				}
			}

			.font_7 {
				font-size: 32rpx;
				color: #000000;
			}

			.text_25 {
				margin-top: 34rpx;
			}

			.group_13 {
				margin-top: 16rpx;

				.font_4 {
					font-size: 26rpx;
					color: #000000;
				}
			}
		}

		.bot_btn {
			width: 100vw;
			height: 150rpx;
			display: flex;
			align-items: center;
			background-color: #ffffff;
			border-top: solid 1rpx #e8e8e8;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 2;

			.btn {
				width: 650rpx;
				margin: 0 auto;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				background: #1C41F1;
				border-radius: 54rpx;
				border: 1rpx solid #FFFFFF;
			}
		}
	}
</style>